{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword,sendKeyWord %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jqgird_css'
    '@jquery_ui_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    {{ gridKeyword('Keyword'|trans,'Support skill number,skill name search'|trans) }}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    {#<div class="widget-box">#}
        {#<div class="widget-header">#}
            {#<h4 class="smaller">{{ 'Seat allocation'|trans }}</h4>#}
        {#</div>#}
        {#<div class="widget-body">#}
            {#<div class="widget-main">#}
                {#<table class="table table-striped table-bordered table-hover">#}
                    {#<tr class="center">#}
                        {#<td>坐席列表</td>#}
                        {#<td>操作</td>#}
                        {#<td>分配给该技能组的坐席</td>#}
                    {#</tr>#}
                    {#<tr>#}
                        {#<td class="col-sm-5">#}
                            {#<table id="grid-agent"></table>#}
                        {#</td>#}
                        {#<td class="center col-sm-2">#}
                            {#<p><button type="button" class="btn btn-white" onclick="add()">添加-->></button></p>#}
                            {#<p><button type="button" class="btn btn-white" onclick="del()"><<--删除</button></p>#}
                        {#</td>#}
                        {#<td class="col-sm-5">#}
                            {#<table id="grid-assign"></table>#}
                        {#</td>#}
                    {#</tr>#}
                {#</table>#}
            {#</div>#}
        {#</div>#}
    {#</div>#}
    {#<input type="hidden" id="objstr" value="" />#}
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@gritter_js'
    '@jquery_ui_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var filter = new Object();
        jQuery(function($) {
            {% if filter is not empty %}
                {% if filter.keyword %}
                    $('#keyword').val('{{ filter.keyword }}');
                    filter.keyword = '{{ filter.keyword }}';
                {% endif %}
            {% endif %}
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                subGridOptions : {
                    plusicon : "ace-icon fa fa-plus center bigger-110 blue",
                    minusicon  : "ace-icon fa fa-minus center bigger-110 blue",
                    openicon : "ace-icon fa fa-chevron-right center orange"
                },
                subGridRowExpanded: function (subgridDivId, rowId) {
                    var subgrid_table_id, pager_id;
                    subgrid_table_id = subgridDivId+"_t";
                    pager_id = "p_"+subgrid_table_id;
                    $("#" + subgridDivId).html("<table id='" + subgrid_table_id + "'></table>");
                    $("#" + subgrid_table_id).jqGrid({
                        datatype: 'json',
                        mtype: 'POST',
                        pager: pager_id,
                        url:"{{ path('icsoc_queue_get_assign_agent') }}?que_ids="+rowId,
                        colNames: ['{{ 'Username'|trans }}','{{ 'Agent number'|trans }}'],
                        colModel:[
                            {name:'ag_name',index:'ag_name', width:190,editable: true, sortable:false},
                            {name:'ag_num',index:'ag_num', width:190,editable: true, sortable:false}
                        ]
                    });
                },
                subGrid : true,
                url: "{{ path('icsoc_queue_list') }}",  //数据；
                colNames:['{{ 'actions'|trans }}', 'ID', '{{ 'Skill group name'|trans }} ','{{ 'The skill set of type'|trans }}','{{ 'Distribution strategy'|trans }}','{{ 'Timeout length'|trans }}(s)','{{ 'Post processing time'|trans }}(s)','{{ 'Skill group number'|trans }}','{{ 'The skill set priority'|trans }}','{{ 'Distribution'|trans }}'],  //列显示名称，是一个数组对象
                postData:{'filter':jsonToString(filter)},
                colModel:[
                    {name:'myac',index:'', width:50, sortable:false, resize:false,
                        formatter:'actions',
                        formatoptions:{
                            keys:true,
                            editbutton:true,
                            editformbutton: true,
                            delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback, afterSubmit:afterDeleteCallback,left:540,top:206},
                            editOptions:{width: "0",height: "0", jqModal:false, beforeShowForm:beforeEditCallback }
                        }
                    },
                    {name:'id',index:'id', width:60, hidden:true,editable: true, sortable:false},
                    {name:'que_name',index:'que_name',width:80,editable:true, sortable:false},
                    {name:'que_type',index:'que_type',width:80,editable:true, sortable:false },
                    {name:'que_strategy',width:80,index:'que_strategy', editable:true, sortable:false },
                    {name:'que_time',width:80,index:'que_time',editable:true, sortable:false },
                    {name:'next_wait',width:80,index:'next_wait', editable:true, sortable:false },
                    {name:'que_num',width:80,index:'next_wait', editable:true, sortable:false },
                    {name:'que_priority',width:80,index:'next_wait', editable:true, sortable:false },
                    {name:'ids',width:80,index:'ids',editable:false,ortable:false, formatter:function(cellvalue, options, rowObject){
                        return "<span onclick='distribution("+rowObject.id+")' style='cursor:pointer' class='btn btn-xs ace-icon fa fa-eye'>{{ 'Distribution'|trans }}</span>";
                    }}
                ],
                mtype: 'POST',
                datatype: "json", //从服务器端返回的数据类型，默认xml：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
                viewrecords : true, //定义是否要显示总记录数
                rowNum: {{ rows is empty ? 10 : rows }},  //默认每页显示多少条数据
                page: {{ page is empty ? 1 : page }}, //默认第几页
                rowList: [10,20,30,50,100], //每页显示几条数据下拉框的选项
                pager : pager_selector, //翻页工具对象
                height: 'auto',
                sortorder: 'desc',
                altRows: true,  //表格间隔底色
                rownumbers:true,
                multiselect: true,  //是否可以多选
                loadComplete: function() {
                    var table = this;
                    setTimeout(function(){
                        updatePagerIcons(table);
                    }, 0);
                },
                sortname: 'id',
                editurl: "{{ path('icsoc_queue_del') }}",//nothing is saved 定义对form编辑时的url
                caption: "{{ 'Skill list'|trans }}"//表格名称
            });
            {{ gridNav(false,false,true,false,true,true,path('icsoc_queue_add')) }}
            {% if isBatchAdd %}
                jQuery(grid_selector).jqGrid('navGrid',pager_selector).navButtonAdd(pager_selector,{caption:'',title:'{{ 'Batch add skill'|trans }}',buttonicon:'ace-icon fa fa-code-fork',onClickButton:function(){
                    window.location.href='{{ path('icsoc_queue_batch') }}';
                }});
            {% endif %}
            function beforeEditCallback(e){
                var form = $(e[0]);
                var id = form[0].id.value;
                var p = $(grid_selector).getGridParam('page');
                var r = $(grid_selector).getGridParam('rowNum');
                //console.log(form[0].id.value);
                window.location.href = "{{ path('icsoc_queue_edit') }}?id="+id+"&page="+p+"&rows="+r+"&filter="+jsonToString(filter);
            }
        });
        function distribution(que_id)
        {
            window.location.href = '{{ path('icsoc_queue_agqu_index', {page:page, rows:rows}) }}&que_id='+que_id;
        }
        /*
        var queId = '';
        function distribution(que_id) {
            queId = que_id;
            $('#grid-table').resetSelection();
            jQuery("#grid-agent").jqGrid({
                url:'{{ path('icsoc_queue_get_agent') }}?que_id='+queId,
                mtype: 'post',
                datatype: 'json',
                colNames: ['','{{ 'Username'|trans }}','{{ 'Agent number'|trans }}'],
                multiselect:true,
                colModel:[
                    {name:'ag_id',index:'ag_id', key:true, hidden:true,fixed:true,editable: true, sortable:false},
                    {name:'ag_name',index:'ag_name', width:190,fixed:true,editable: true, sortable:false},
                    {name:'ag_num',index:'ag_num', width:190,fixed:true,editable: true, sortable:false}
                ]
            });
            var lastsel2;
            jQuery("#grid-assign").jqGrid({
                url:'{{ path('icsoc_queue_get_assign_agent') }}?que_id='+queId,
                mtype: 'post',
                datatype: 'json',
                colNames: ['ag_id','{{ 'Username'|trans }}','{{ 'Agent number'|trans }}','{{ 'Skill level'|trans }}', ''],
                multiselect:true,
                editurl: '{{ path('icsoc_queue_update_skill') }}',
                colModel:[
                    {name:'ag_id',index:'ag_id', key:true, hidden:true,fixed:true,editable: false, sortable:false},
                    {name:'ag_name',index:'ag_name', width:190,fixed:true,editable: false, sortable:false},
                    {name:'ag_num',index:'ag_num', width:190,fixed:true,editable: false, sortable:false},
                    {name:'skill',index:'skill', width:190,fixed:true,editable: true, sortable:false},
                    {name:'aqid',index:'aqid', hidden:true,fixed:true,editable: true, sortable:false}
                ],
                onSelectRow: function (id) {
                    if (id && id!==lastsel2) {
                        jQuery('#grid-assign').jqGrid('restoreRow', lastsel2);
                        jQuery('#grid-assign').jqGrid('editRow', id, true);
                        $("input[id^='"+id+"_skill']","#grid-assign").bind('blur',function(){
                            $('#grid-assign').saveRow(id);
                        });
                        lastsel2 = id;
                    }
                }
            });
            var post = {'que_ids':que_id};
            $('#grid-agent').setGridParam({postData:post}).trigger("reloadGrid");
            $('#grid-assign').setGridParam({postData:post}).trigger("reloadGrid");
        }

        function add()
        {
            var agId = getIds("#grid-agent");
            $.ajax({
                type: 'post',
                url: "{{ path('icsoc_queue_set_assign_agent') }}",
                data: 'ids='+agId+"&que_id="+queId,
                success: function (res) {
                    showRes(res);
                }
            });
            refresGrid();
        }

        function del()
        {
            var agId = getIds("#grid-assign");
            if (agId == 0) {
                return ;
            }
            $.ajax({
                type: 'post',
                url: "{{ path('icsoc_queue_cancel_assign_agent') }}",
                data: 'ids='+agId+"&que_id="+queId,
                success: function (res) {
                    showRes(res);
                }
            });
            refresGrid();
        }
        function showRes(res)
        {
            if (res.error) {
                gritterAlert('{{ 'Prompt'|trans }}',res.message, 'error');
            } else {
                gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Action success'|trans }}', 'success');
            }
        }
        function getIds(id) {
            if (!queId) {
                gritterAlert('{{ 'Prompt'|trans }}','{{ 'Please select the skill set'|trans }}', 'error');
                return 0;
            }
            var ids = $(id).jqGrid('getGridParam','selarrrow');
            if(ids.length <= 0 ){
                gritterAlert('{{ 'Prompt'|trans }}','{{ 'xx'|trans }}', 'error');
                return 0;
            }
            var agId = '';
            for (var i=0; i < ids.length; i++) {
                var row = $(id).jqGrid('getRowData', ids[i]);
                agId+= row.ag_id+',';
            }
            agId = agId.substr(0, agId.length-1);
            return agId;
        }
        function refresGrid()
        {
            $('#grid-agent').trigger("reloadGrid");
            $('#grid-assign').trigger("reloadGrid");
        }*/
        jQuery(function($) {
            $('#loading-btn').on(ace.click_event, btnSerach);
            $('#searchForm').on('submit', btnSerach);
        })
        function btnSerach(){
            //可以开始获取值进行查询
            keyword = $('#keyword').val();
            filter.keyword = keyword;
            if ($('#select_type').length != 0) {
                var sound_type = $("#select_type").val();
                filter.select_type = sound_type;
            }
            var str = jsonToString(filter);
            var arr = {'filter':str};
            $('#grid-table').setGridParam({postData:arr}).trigger("reloadGrid");
            return false;
        }
        $(document).ready(function(){
            $('#keyword').tooltip();
        });
    </script>
{% endblock %}